<template>
    <div class="con">
        <!-- 历史记录组件 -->
        <div class="history"  v-if="ShowHistory">
            <div class="conent" ref="historyBox">
                <div class="title">
                    <span>历史记录 </span>
                    <!-- 删除图标 -->
                    <van-icon name="delete-o" class="delicon" @click="clearhistory" />
                </div>
                <figure>
                    <p v-for="item in historyKeywordList" @click="findFn(item)">{{ item }}</p>
                </figure>
            </div>
        </div>
        <!--热门搜索 -->
        <div class="HotSearch">
            <div class="conent">
                <div class="title">
                    <span>热门搜索 </span>
                </div>
                <figure>
                    <p v-for="item in hotKeywordList" @click="findFn(item.keyword)" class="hotword">{{ item.keyword }}</p>
                </figure>
            </div>
        </div>
    </div>
</template>

<script>
import { clearHistorytApi } from '@/api/SearchBoxAPi.js'
export default {
    name: '',
    data() {
        return {
            ///是否展示历史记录
            ShowHistory:true
        };
    },
    props:['historyKeywordList','hotKeywordList'],
    methods:{
         // 清空历史记录
        clearhistory() {
            clearHistorytApi().then(res => {
                console.log('调用清空历史记录接口对应的数据',res);
                // 隐藏历史记录组件
                this.ShowHistory=false

            })
        },
        findFn(historyitem){
            // 将historyKeywordList数组的数据传递给父组件search.vue
            this.$emit('findhistoryitem',historyitem)
        }
    }
}

</script>
<style scoped lang="less">

.con {
    width: 375px;
    height: 667px;
    background-color: #B2B2B2;

}
.history,
    .HotSearch,
    .history {
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: center;
        background-color: #fff;

        .conent {
            width: 360px;
            // height: 31px;

            .title {
                width: 360px;
                height: 31px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                span {
                    font-size: 16px;
                    width: 64px;
                }

                .delicon {
                    width: 16px;
                    height: 16px;
                    font-size: 16px;
                }

            }


            figure {
                // width: 375px;
                // height: 70px;
                margin: 0 10px 0 0;
                display: flex;
                flex-wrap: wrap;

                p {
                    height: 12px;
                    width: auto;
                    border: 1px solid #969799;
                    border-radius: 3px;
                    font-size: 12px;
                    margin: 2px;
                    padding: 3px;
                    display: inline-block;
                    color: #969799;

                }
                .hotword:first-child{
                    border-color: #EE0A24;
                    color:#EE0A24
                }
            }


        }

    }
</style>